<script setup lang="ts">
import { computed, ref } from 'vue'
import chart from '@/components/common/chart.vue'

interface chartData {
  name: string,
  value: number,
}

const props = defineProps<{
  data: chartData;
  height?: string,
  width?: string,
  color?: string[]
}>()

const width = props.width || '100%';
const height = props.height || '100%';
const color = props.color || ['rgba(63, 177, 227, 1)', 'rgba(107, 230, 193, 1)', 'rgba(98, 108, 145, 1)', 'rgba(160, 167, 230, 1)', 'rgba(90, 163, 163, 1)', 'rgba(150, 222, 232, 1)', 'rgba(90, 163, 90, 1)', 'rgba(129, 233, 129, 1)']


const options = computed(() => {
  let opt = {
    animation: false,
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['10%', '90%'],
        center: ['55%', '50%'],
        roseType: 'area',
        padAngle: 2,
        itemStyle: {
          borderRadius: 5
        },
        label: {
          show:false,
        },
        data: props.data
      }
    ],
    color: color,
  }
  return opt;
})

</script>

<template>
  <div :style="{ width: `${width}`, height: `${height}` }" class="chart-box">
    <chart class="chart" :options="options" />
  </div>
</template>

<style scoped lang="stylus">
.chart-box {
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>